## [1.15. HTML5-формы](https://html5book.ru/html5-forms/)

![](_src\html5_form.png)

### 1. Элемент \<form>

#### АТРИБУТЫ ЭЛЕМЕНТА \<FORM>

<table class="t3">
<caption>Таблица 1. Атрибуты элемента &lt;form&gt;</caption>
<tbody><tr>
<th>Атрибут</th>
<th>Значение / описание</th>
</tr>
<tr>
<td><kbd>accept-charset</kbd></td>
<td>Значение атрибута представляет собой разделенный пробелами <b>список кодировок символов</b>, которые будут использоваться для отправки формы, например, <kbd>&lt;form accept-charset="ISO-8859-1"&gt;</kbd>.</td>
</tr>
<tr>
<td><kbd>action</kbd></td>
<td><b>Обязательный атрибут</b>, который указывает <kbd>url</kbd> обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, <kbd>action.php</kbd>), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию.<br>
В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута <kbd>action</kbd> можно указать значение <kbd>#</kbd>.<br>
Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:<br>
<kbd>&lt;form action="mailto:адрес вашей электронной почты" enctype="text/plain"&gt;&lt;/form&gt;</kbd></td>
</tr>
<tr>
<td><kbd style="color:#38BAC7">autocomplete</kbd></td>
<td>Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:<br>
<kbd>on</kbd> — означает, что поле не защищено, и его значение можно сохранять и извлекать,<br>
<kbd>off</kbd> — отключает автозаполнение для полей форм.</td>
</tr>
<tr>
<td><kbd>enctype</kbd></td>
<td>Используется для указания <b>[MIME](http://htmlbook.ru/html/value/mime)</b>-типа данных, отправляемых вместе с формой, например, <kbd>enctype="multipart/form-data"</kbd>. Указывается только в случае <kbd>method="post"</kbd>.<br>
<kbd>application/x-www-form-urlencoded</kbd> — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как <kbd>+</kbd>, а специальный символ, например, такой как <kbd>!</kbd> будет закодирован шестнадцатиричной форме как <kbd>%21</kbd>.<br>
<kbd>multipart/form-data</kbd> — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.<br>
<kbd>text/plain</kbd> — указывает на то, что передается обычный (не html) текст.</td>
</tr>
<tr>
<td><kbd>method</kbd></td>
<td>Задает способ передачи данных формы.<br>
Метод <kbd>get</kbd> передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида <kbd>www.anysite.ru/form.php?var1=1&amp;var2=2</kbd>. Имена и значения переменных присоединяются к адресу сервера после знака <kbd>?</kbd> и разделяются между собой знаком <kbd>&amp;</kbd>. Все специальные символы и буквы, отличные от латинских, кодируются в формате <kbd>%nn</kbd>, пробел заменяется на <kbd>+</kbd>. Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.<br>
Метод <kbd>post</kbd> применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.<br>
<kbd>&lt;form action="action.php" enctype="multipart/form-data" method="post"&gt;&lt;/form&gt;</kbd></td>
</tr>
<tr>
<td><kbd>name</kbd></td>
<td>Задает <b>имя формы</b>, которое будет использоваться для доступа к элементам формы через сценарии, например, <kbd>name="opros"</kbd>.</td>
</tr>
<tr>
<td><kbd style="color:#38BAC7">novalidate</kbd></td>
<td>Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения</td>
</tr>
<tr>
<td><kbd>target</kbd></td>
<td>Указывает окно, в которое будет направлена информация:<br>
<kbd>_blank</kbd> — новое окно<br>
<kbd>_self</kbd> — тот же фрейм<br>
<kbd>_parent</kbd> — родительский фрейм (если он существует, если нет — то в текущий)<br>
<kbd>_top</kbd> — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.</td>
</tr>
</tbody></table>

### 2. Группировка элементов формы \<fieldset>

![](_src\fieldset.png)

### 3. Создание полей формы \<input>
### 4. Текстовые поля ввода \<textarea>
### 5. Раскрывающийся список \<select>
### 6. Надписи к полям формы \<label>
### 7. Кнопки \<button>
### 8. Флажки и переключатели в формах



@@ html5book.ru point this learn